<template>
  <eip-modal :visible="visible" :title="title" @close="cancel">
    <template slot="body">
      <a-spin :spinning="spinning">
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="config.labelCol"
          :wrapper-col="config.wrapperCol"
        >
          <a-form-model-item label="名称" prop="name">
            <a-input v-model="form.name" placeholder="请输入名称" allow-clear />
          </a-form-model-item>
          <a-form-model-item label="图标" prop="icon">
            <eip-icon
              :name="form.icon"
              :theme="form.theme"
              @click="iconClick"
              @clear="iconClear"
            ></eip-icon>
          </a-form-model-item>
          <a-form-model-item label="图片" prop="image">
            <a-input
              v-model="form.image"
              placeholder="请输入图片地址"
              allow-clear
            >
              <a-avatar
                slot="prefix"
                size="small"
                :src="form.image"
                v-if="form.image"
              />
              <a-icon
                @click="material.visible = true"
                slot="addonAfter"
                type="setting"
              />
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="备注" prop="remark">
            <a-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入备注"
            />
          </a-form-model-item>

          <a-form-model-item label="禁用">
            <a-switch v-model="form.isFreeze" />
          </a-form-model-item>

          <a-form-model-item label="排序号" prop="orderNo">
            <a-input-number
              id="inputNumber"
              style="width: 100%"
              placeholder="请输入排序号"
              v-model="form.orderNo"
              :min="0"
              :max="999"
            />
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </template>
    <template slot="footer">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </template>
    <eip-material
      v-if="material.visible"
      :visible.sync="material.visible"
      @ok="materialOk"
    />
  </eip-modal>
</template>

<script>
import { save, findById } from "@/services/system/menu/edit";
import { agileSave } from "@/services/system/zerocode/app/worksheet";
import { newGuid } from "@/utils/util";
export default {
  name: "group",
  data() {
    return {
      material: {
        visible: false,
      },
      config: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      form: {
        name: "",
        icon: null,
        image: null,
        isFreeze: false,
        orderNo: 1,
        remark: null,
        publicJson: null,
      },
      rules: {
        icon: [
          {
            required: true,
            message: "请选择图标",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },

      loading: false,
      spinning: false,
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    zeroCodeId: {
      type: String,
    },
    type: {
      type: String,
    },
    menuId: {
      type: String,
    },
  },

  mounted() {
    this.find();
  },

  methods: {
    /**
     * 确认素材
     */
    materialOk(path) {
      this.form.image = path;
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    save() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          that.spinning = true;

          that.form.publicJson.name = that.form.name;
          that.form.publicJson.icon = that.form.icon;
          that.form.publicJson.image = that.form.image;

          var listForm = {
            zeroCodeId: that.zeroCodeId,
            name: that.form.name,
            orderNo: that.form.orderNo,
            isFreeze: that.form.isFreeze,
            remark: that.form.remark,
            type: that.eipZeroCodeMenuType.view,
            publicJson: JSON.stringify(that.form.publicJson),
            menuId: that.menuId,
          };

          agileSave(listForm).then(function (result) {
            if (result.code === that.eipResultCode.success) {
              that.$message.success(result.msg);
              that.cancel();
              that.$emit("save", that.zeroCodeId);
            } else {
              that.$message.error(result.msg);
            }
            that.loading = false;
            that.spinning = false;
          });
        } else {
          return false;
        }
      });
    },

    /**
     * 根据Id查找
     */
    find() {
      let that = this;
      if (this.zeroCodeId) {
        that.spinning = true;
        findById(this.menuId).then(function (result) {
          let form = result.data;
          that.form = form;
          that.spinning = false;
        });
      } else {
        var vtitem = that.$utils.find(
          that.eipZeroCodeViewType,
          (f) => f.type == this.type
        );
        this.form.publicJson = that.$utils.clone(that.eipZeroCodeView, true);
        this.form.name = this.title;
        this.form.icon = vtitem.icon;
        this.form.publicJson.type = this.type;
        this.zeroCodeId = newGuid();
      }
    },

    /**
     *图标点击
     */
    iconClick(icon) {
      this.form.icon = icon.name;
      this.form.theme = icon.theme;
    },

    /**
     * 清空图标
     */
    iconClear() {
      this.form.icon = null;
      this.form.theme = null;
    },
  },
};
</script>
